<template>
	<view class="layout">
		<view class="box" >
			<view style="width: 702rpx;" class="xztv-row  xztv-flex-wrap">
				<view v-for="(item,index) in res" :key="index" style="width:375rpx;"  @click="modelNavigateTo(item)">
					<image :src="item.img" style="width:330rpx;border-radius: 8px;" mode="widthFix"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {modelNavigateTo} from "./tpl";
	export default {
		components: {},
		title: "卡片02",
		props: {
			res: {
			},
			listStyle: {
				type: Object,
				default: () => {}
			},
		},
		computed: {
			
			
		},
		mounted() {

		},
		data() {
			return {
				modelNavigateTo,
			};
		},
		methods:{
			getAuthor(author){
				//console.log(author.substr(0,5));
				return author.substr(0,6);
			},
			numFormat(num){
				return num > 9999 ? ((num-num%1000)/10000 + '万') : num
			},
			imageError(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			}
		},
	};
</script>

<style scoped lang="less">
	.box {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		width: 702rpx;
		margin-top:16rpx;
		background-size: 100% 100%;
		border-radius: 16rpx;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.03);
	}
	.title{
		height: 48rpx;
		font-size: 34rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 48rpx;
	}
	.second-title{
		height: 36rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
</style>